<template>
  <div id="a">
    <van-tabs background="#FF6040">
      <van-tab title="全部" title-style="color:#FFF3F2;font-size: 14px;">
        <div class="tit">
          <van-radio-group>
            <van-radio name="1" icon-size="12px"
              ><p>
                <span class="s_title">小U自营</span
                ><span class="t-tit">已免运费</span
                ><span class="q-tit">领券</span>
              </p></van-radio
            >
          </van-radio-group>
        </div>
       
        <div class="main-t" v-if="cartList.length > 0">
           <van-checkbox-group v-model="result" ref="checkboxGroup">
          <van-swipe-cell v-for="item in cartList" :key="item.id" >
            <div class="check">
                <van-checkbox
                  :name="item"
                  ref="checkboxes"
                  checked-color="#ff6040"
                />
              </div>
            <van-stepper v-model="item.num" 
             @plus="plus(item.id)"
             @minus="minus(item.id)"
             :name="item.id" />
            <van-card
              :price="item.price"
              desc="小u商城就是好"
              :title="item.goodsname"
              class="goods-card"
              :thumb="item.img"
              :origin-price="item.market_price"
            />
            <template #right >
              <van-button
                @click="del(item.id)"
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
          </van-checkbox-group>
        </div>
        <div v-else>
          <van-empty description="购物车空空如也" />
          
        </div>

        <van-submit-bar
          :price="sumprice"
          @submit="onSubmit"
          button-text="结算"
          safe-area-inset-bottom:false
        >
          <van-checkbox icon-size="12px" @click="checkAll" v-model="checkall">全选</van-checkbox>
        </van-submit-bar>
      </van-tab>
      <van-tab title="降价" title-style="color:#FFF3F2;font-size: 14px;"
        >内容 2</van-tab
      >
      <van-tab title="常卖" title-style="color:#FFF3F2;font-size: 14px;"
        >内容 3</van-tab
      >
      <van-tab title="分类" title-style="color:#FFF3F2;font-size: 14px;"
        >内容 4</van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import { cartList, cartDel,cartEdit } from "../util/request/api";
export default {
  data() {
    return {
      img1: require("../assets/images/white.png"),
      radio: "1",
      value: 1,
      cartList: [],
      result:[],
      checkall: false,
    };
  },
  mounted() {
    cartList({
      uid: JSON.parse(sessionStorage.getItem("isLogin")).uid,
    }).then((res) => {
      if (res.data.code == 200) {
        this.cartList = res.data.list;
      }
    });
  },
  computed:{
    sumprice: function () {
      let sum = 0;
      this.cartList.forEach((item) => {
        sum = item.price*item.num;
         console.log(sum);
      });  
      return sum * 100;
    },
  },
  methods: {
    onSubmit() {
      if (this.result.length == 0) {
        Toast("未选择商品");
        return;
      }
      this.$router.push("/order");
    },
    del(id) {
      cartDel({ id })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            console.log(11111);
            Toast("删除成功");
            location.reload();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
     checkAll() {
      if (this.result.length== this.cartList.length) {
        this.$refs.checkboxGroup.toggleAll(false);
      } else {
        console.log(this.result);
        this.$refs.checkboxGroup.toggleAll(true);
      }
    },
     minus(id) {
      cartEdit({id:id,type:1})
        .then((res) => {
          if (res.data.code == 200) {
            this.cartList(this.uid);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    plus(id) {
      cartEdit({id:id,type:2})
        .then((res) => {
          if (res.data.code == 200) {
            this.cartList(this.uid);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("isLogin")) {
      next();
    } else {
      Dialog.confirm({
        title: "标题",
        message: "未登录不能查看购物车，请先登录",
      }).then(() => {
        next("/login");
      });
    }
  },
  watch: {
    result: function () {
      this.checkall = this.result.length == this.cartList.length ? true : false;
    },
  },
};
</script>

<style scoped>
.van-submit-bar {
  margin-bottom: 0.4rem;
}
.van-radio {
  height: 0.36rem;
  line-height: 0.36rem;
}
.tit {
  margin-left: 0.1rem;
  background: #ffffff;
}
.s_title {
  font-size: 16px;
  color: #333333;
  font-family: PingFangSC-Semibold;
}
.t-tit {
  margin-left: 1.5rem;
}
.q-tit {
  margin-left: 0.1rem;
  color: #ff6040;
}
.main-t {
  width: 100%;
  height: 3.84rem;
}
.van-stepper {
  position: absolute;
  left: 2.65rem;
  top: 0.6rem;
  z-index: 2;
}
.van-checkbox {
  margin-top: 0.05rem;
}
.goods-card {
  color: #333333;
  font-size: 0.16rem;
  background-color: white;
  margin-left: 0.075rem;
  margin-bottom: 0.2rem;
}

.delete-button {
  height: 100%;
}
input {
  position: absolute;
  left: 0.09rem;
  top: 0.5rem;
  z-index: 2;
}
</style>
